<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1 {
				/* width: 200px; */
				height: 200px;
				background-color: red;
				position: relative;
			}

			.box2 {
				width: 200px;
				height: 200px;
				background-color: yellow;
				/*
				定位 position：
					- static 默认值
					- relative 开启元素的相对定位
					- absolute 绝对定位
					- fixed 固定定位，是绝对定位的一种
				*/

				/*
			   1 开启相对定位，不设置偏移量，没有任何变化。
			   2 相对定位是相对于元素在文档流中原来的位置的定位。
			   3 相对定位不会脱离文档流，原来的位置不会被取代。
			   4 相对定位会提升元素的z轴。
			   5 相对定位不会改变元素的性质，块或者内联(不能设置长宽)都不会改变。
			   */
				position: relative;

				/*
			   position的值不是static，那么算是开启定位。
			   通过left right top bottom设置“偏移量”
			   left 元素相对于其定位位置的左侧偏移量
			   right 元素相对于其定位位置的右侧偏移量
			   top 元素相对于其定位位置的上侧偏移量
			   bottom 元素相对于其定位位置的下侧偏移量
			   */

				left: 100px;
				top: 200px;
			}

			.box3 {
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
			}
			
			.s1{
				position: relative;
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<!-- 
		H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷HTML+CSS教程\视频\视频4 
		《69.尚硅谷_HTML&CSS基础_相对定位》
		-->
		<!-- 快捷方式 div.box$*3 -->
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		
		<span class="s1">span</span>
	</body>
</html>
